<nz-alert
  *ngIf="success"
  nzBanner
  nzMessage="Flag resolved."
  nzType="success"
  nzCloseable
  (nzOnClose)="onSuccessBannerClose()"></nz-alert>
<ng-container *ngrxLet="viewer$ as viewer">
  <ng-container *ngIf="viewer.signedIn; else notSignedIn">
    <ng-container
      *ngIf="viewer.isEditor || viewer.isAdmin || flag.openActivity.user.id === viewer.id; else noPermissions">
      <ng-template *ngTemplateOutlet="submitButton"></ng-template>
    </ng-container>
  </ng-container>
  <ng-template #notSignedIn>
    <span
      nz-tooltip
      nzTooltipTitle="Must be signed in to resolve flag.">
      <ng-template *ngTemplateOutlet="submitButton"></ng-template>
    </span>
  </ng-template>
  <ng-template #noPermissions>
    <span
      nz-tooltip
      nzTooltipTitle="If you are not an editor, you can only resolve flags you opened.">
      <ng-template *ngTemplateOutlet="submitButton"></ng-template>
    </span>
  </ng-template>
  <ng-template #submitButton>
    <button
      *ngIf="!success"
      nz-button
      nz-popover
      nzSize="small"
      [nzPopoverTitle]="flagResolvePopoverTitleTemplate"
      [(nzPopoverVisible)]="flagResolvePopoverVisible"
      (click)="flagResolvePopoverVisible = !flagResolvePopoverVisible"
      [nzPopoverContent]="flagResolvePopoverContentTemplate"
      [nzPopoverTrigger]="undefined "
      nzPopoverPlacement="bottom"
      [disabled]="!viewer.signedIn || (viewer.isCurator && flag.openActivity.user.id != viewer.id)">
      Resolve Flag
      <i
        nz-icon
        nzType="caret-down"
        nzTheme="outline"></i>
    </button>
  </ng-template>
</ng-container>

<ng-template #flagResolvePopoverTitleTemplate>
  Resolve Flag
  <span [ngStyle]="{ 'float': 'right' }">
    <i
      nz-icon
      nzType="close"
      nzTheme="outline"
      (click)="flagResolvePopoverVisible = false; errorMessages = []"></i>
  </span>
</ng-template>

<ng-template #flagResolvePopoverContentTemplate>
  <nz-alert
    *ngIf="errorMessages.length > 0"
    nzType="error"
    nzShowIcon
    [nzDescription]="errorContents"
    nzMessage="Error Resolving Flag">
  </nz-alert>
  <ng-template #errorContents>
    <ul>
      <li *ngFor="let error of errorMessages">{{ error }}</li>
    </ul>
  </ng-template>
  <nz-card
    style="width: 300px"
    nzType="inner">
    <form
      nz-form
      (ngSubmit)="resolveFlag()"
      nzLayout="vertical">
      <cvc-comment-input-form [(comment)]="comment"></cvc-comment-input-form>
      <nz-spin
        nzTip="Submitting"
        [nzSpinning]="loading">
        <nz-form-item>
          <nz-form-control>
            <cvc-form-buttons>
              <button
                type="submit"
                nz-button
                cvcOrgSelectorBtn
                nzType="primary"
                nzSize="small"
                [disabled]="!(comment !== undefined && comment.length >= 10)"
                nz-tooltip
                [nzTooltipTrigger]="selectedOrg ? 'hover' : null"
                [nzTooltipTitle]="'For ' + selectedOrg?.name">
                Resolve
              </button>
            </cvc-form-buttons>
          </nz-form-control>
        </nz-form-item>
      </nz-spin>
    </form>
  </nz-card>
</ng-template>
